import {MantineProviderProps} from '@mantine/core';
import {createSlice, PayloadAction} from '@reduxjs/toolkit';
import {RootState} from '../index';
// Define a type for the slice state

// Define the initial state using that type
const initialState: MantineProviderProps['theme'] = {
    fontFamily: 'Open Sans',
    colorScheme: 'light',
};

export const systemThemeSlice = createSlice({
    name: 'systemTheme',
    initialState,
    reducers: {
        setColorScheme: (state, action: PayloadAction<'light' | 'dark'>) => {
            state.colorScheme = action.payload;
            return state;
        },
    },
});

export const {setColorScheme} = systemThemeSlice.actions;

// Other code such as selectors can use the imported `RootState` type
export const selectSystemTheme = (state: RootState) => state.systemTheme;

export default systemThemeSlice.reducer;
